import React, { Component } from 'react';
import axios from 'axios'
import './index.css'
export default class Player extends Component {
  state = {
    tracks: [],
  }
  componentDidMount() {
    // 获取url地址并截取id
    var test = window.location.href.split('/').pop()
    // 发送请求
    axios.get(`http://iwenwiki.com:3000/song/url?id=${test}`).then(
      //请求成功后，
      response => {
        // 数据请求成功后App更新状态(loading页面消失，数据页面出现)
        this.setState({ tracks: response.data.data })
      },
      errer => {
        //数据请求失败后App更新状态
        console.log('没有数据', errer);
      }
    )
  }
  render() {
    var obj = this.state.tracks
    return (
      <div className='musicpage'>
        <div className="background">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        {
          obj.map(item => {
            return (
              <audio key={item.id} className='musicplayer' controls autoPlay src={item.url}></audio>
            )
          })
        }
      </div>
    )
  }
}
